<template>
  <div :class="scrollTop > 0 ? 'custom-nav-true' : 'custom-nav-false' ">
    <div :class="isIPhoneX ? 'mar-t-20' : ''" class="flex v-align-c">
      <div @click="navigateBack"></div>
      <div class="flex-item align-c pad-r-30 mar-r-10 font-w">
        {{ scrollTop > 0 ? title : '　' }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isComponents: true
      }
    },
    props: {
      scrollTop: {
        type: Number,
        default: 0
      },
      title: String
    },
    computed: {
      isIPhoneX() {
        return this.$utils.isIPhoneX()
      }
    },
    methods: {
      navigateBack() {
        this.$pt.navigateBack({
          delta: -1
        })
      }
    }
  }
</script>

<style scoped>
  .back-bg {
    background-color: #ededed;
    border-radius: 50%;
    padding: 2px;
  }

  .custom-nav-true {
    z-index: 999;
    width: 100%;
    padding-top: 28px;
    padding-bottom: 10px;
    position: fixed;
    top: 0;
    background-color: #ededed;
  }

  .custom-nav-false {
    z-index: 999;
    width: 100%;
    padding-top: 28px;
    padding-bottom: 10px;
    position: fixed;
    top: 0;
  }
</style>
